@extends("admin.frame_layout")
<?php $top_selected = "系统设置";$page_menu = "登录界面皮肤" ?>
@section('content')
    <div id="app" class="rightinfo">
        <ul class="imglist">
            @foreach($themes as $theme)
                <li>
                    <span @click="openPreview('{{asset($theme['preview'])}}')">
                    <img src="{{asset($theme['thumb'])}}"/>
                    </span>
                    <h2>
                        <a @click="openPreview('{{asset($theme['preview'])}}')">
                        {{$theme['title']}}</a>
                    </h2>
                    <p>
                        <a @click="openPreview('{{asset($theme['preview'])}}')">预览</a>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <a onclick="openOkDlg('{{route('admin.login.theme.act',
                        ['key'=>$theme['key']])}}')">使用</a>
                    </p>
                </li>
            @endforeach
        </ul>
        <transition name="theme"
                    enter-active-class="animated zoomIn"
                    leave-active-class="animated zoomOut">
            <div class="thumbPanel reports" v-show="showPreview">
                <div class="r-title">登录主题效果预览图<a class="close" @click="closePreview"></a></div>
                <img :src="previewUrl" width="100%"/>
                <div class="clearfix"></div>
            </div>
        </transition>
    </div>
    @include('admin.coms.dialog')
@endsection
@section('footer')
    <script src="/admin/js/vue.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //初始化表格操作菜单
            $('.tablelist tbody tr:odd').addClass('odd');
            $(".tablelist .act").hover(function () {
                $($(this).attr("bind")).show();
            }, function () {
                $($(this).attr("bind")).hide();
            });
        });
        var app = new Vue({
            el: "#app",
            data: {
                showPreview: false,
                previewUrl: ""
            },
            methods: {
                openPreview: function (url) {
                    this.previewUrl = url;
                    this.showPreview = true;
                },
                closePreview: function () {
                    this.showPreview = false;
                }
            }
        });
    </script>
@endsection
@section('head')
    <style type="text/css">
        #app {
            position: relative;
        }

        .theme-enter {
            opacity: 0;
        }
    </style>
@endsection
